<!DOCTYPE>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>隔行变色</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#tab1{
			width: 500px;
			margin: 100px auto;
			text-align:center;			
		}
	</style>
<script type="text/javascript">
window.onload = function() {
	let tab1 = document.getElementById('tab1');
	let oldBgcolor;
	for(let i = 0; i < tab1.rows.length; i++) {
		if(i % 2 == 1) {
			tab1.rows[i].style.backgroundColor = "#AAA";
		}
		//静态绑定， 
		// tab1.rows[i].onmouseover = function() {
		// 	oldBgcolor = this.style.backgroundColor;
		// 	tab1.rows[i].style.backgroundColor = "green";
		// }
		// tab1.rows[i].onmouseout = function() {
		// 	tab1.rows[i].style.backgroundColor = oldBgcolor;
		// 	console.log(i);
		// }
	}
	//动态绑定
	tab1.onmouseover = function(ev) {
		let e = ev || window.ev;

		let target = e.target || e.srcElement;
		if(target.nodeName != "TABLE") { //防止数据源是tbale 
			target = target.parentNode;
			oldBgcolor = target.style.backgroundColor;
			target.style.backgroundColor = "green";
		}
	}
	tab1.onmouseout = function(ev) {
		let e = ev || window.ev;
		let target = e.target || e.srcElement;
		if(target.nodeName != "TABLE") {
			target.parentNode.style.backgroundColor = oldBgcolor;
		}
	}
	let name = document.getElementById('name');
	let age = document.getElementById('age');
	var addData = document.getElementById("addData");
	let id = 5;
	addData.onclick = function() {
		let name = document.getElementById('name');
		let age = document.getElementById('age');
		var addData = document.getElementById("addData");
		let cTr = document.createElement('tr');
		let cTd = document.createElement('td');
		cTd.innerHTML = ++id;
		cTr.appendChild(cTd);

		cTd = document.createElement('td');
		cTd.innerHTML = name.value;
		cTr.appendChild(cTd);
		
		cTd = document.createElement('td');
		cTd.innerHTML = age.value;
		cTr.appendChild(cTd);
		
		cTd = document.createElement('td');
		cTd.innerHTML = "<a href='javascript:void(0)'>删除</a>";
		cTr.appendChild(cTd);
		tab1.tBodies[0].appendChild(cTr);

		cTd.getElementsByTagName('a')[0].onclick = function() {
			tab1.tBodies[0].removeChild(this.parentNode.parentNode);
		}
	}


}
</script>
<!-- <script type="text/javascript">
//添加删除操作
	let name = document.getElementById('name');
	let age = document.getElementById('age');
	var addData = document.getElementById("addData");
	let id = 5;
	addData.onclick = function(ev) {
		// let cTr = document.createElement('tr');
		// let cTd = document.createElement('dt');
		// cTd.innerHTML = id++;
		// cTr.appendChild(cTd);
		
		// tab1.appendChild(cTr);
	}
</script> -->
</head>
<body>
	姓名:<input id="name" type="text" name="">
	年龄:<input id="age" type="text" name="">
	<input  id="addData" type="button" name="" value="添加">
<table id="tab1" border="1" cellspacing="0" >
	<tr>
		<td>id</td>
		<td>name</td>
		<td>age</td>
		<td>操作</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2,1</td>
		<td>2,2</td>
		<td></td>
	</tr>
	<tr>
		<td>2</td>
		<td>adfk</td>
		<td>sdf2</td>
		<td></td>
	</tr>
	<tr>
		<td>3</td>
		<td>2,1</td>
		<td>2,2</td>
		<td></td>
	</tr>
	<tr>
		<td>4</td>
		<td>adfk</td>
		<td>sdf2</td>
		<td></td>
	</tr>
	<tr>
		<td>5</td>
		<td>2,1</td>
		<td>2,2</td>
		<td></td>
	</tr>
	

</table>
</body>
</html>